.container {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.mycontainer {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}


body {
  height: 100%;
  width: 100%;
  color: white;
}

html {
  height: 100%;
  width: 100%;
}

#app {
  height: 100%;
  width: 100%;
}

.page-one {
  height: 100%;
  width: 100%;
  background: url(./images/01.png?1) no-repeat;
  background-size: 100% auto;
  background-color: black;

}

.page-two {
  height: 100%;
  width: 100%;
  background: url(./images/02.png?1) no-repeat;
  background-size: 100% auto;
  background-color:rgb(0, 0, 30);
  position: absolute;
  top: 0;
}

.page-three {
  height: 100%;
  width: 100%;
  background-color:rgb(232, 227, 231);
  background: url(./images/03.png?1) no-repeat;
  background-size: 100% 100%;
  top: 0;
  position: absolute;
}

.page-four {
  height: 100%;
  width: 100%;
  background-color: purple;
  background: url(./images/04.png?1) no-repeat;
  background-size: 100% 100%;
  top: 0;
  position: absolute;
}

.pre-say-contianer {
  height: 50%;
  margin-left: 15px;
  margin-right: 15px;
  /* background: url(./images/nightmoon.png?1) no-repeat; */
  background-size: 100% 100%;
}

.empty {
  height: 5%;
  background-color: hsla(0%, 0%, 0%, 0);
}

.click_send {
  /* 3.43/1 */
  width: 103px;
  height: 30px;
  background: url(./images/clicktosend.png?1) no-repeat;
  background-size: 100%, auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
}

.footer {
  width: 100%;
  height: 10%;
  position: fixed;
}

.footer-contianer {
  text-align: center;
  color: white;
}

h5 img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.sharePerson {
  margin-top: 10%;
  text-align: right;
  vertical-align: middle;
  color: white;
  padding-right: 20%;
}

.sharePerson span{
  font-size: 14px;
}

span img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

span {
  font-size: 20px;
}

.showwordempty {
  width: 100%;
  height: 70%;
  background-color: hsla(0%, 0%, 0%, 0);
}

.showwords {
  width: 100%;
  height: 30%;
  text-align: center;
  vertical-align: middle;
  color: white;
  margin-top: 10%;
}

.showwords p {
  font-size: 24px;
}


p {
  font-size: 18px;
  margin-right: 5px;
}

.tips {
  margin-top: 20%;
  text-align: center;
  color: white;
}

.input-content {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  width: 70%;
}

.shareTips {
  text-align: center;
  margin-top: 10%;
  color: white;
}

.danmuArea {
  width: 70%;
  height: 30%;
  margin-top: 10%;
  position: relative;
  overflow: hidden;
  margin-left: 15%;
  /* background-color: cyan; */
}

/* #danmu {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-size: 20px;
}
#danmu .newli {
  height: 30px;
  line-height: 30px;
  position: absolute;
  overflow: hidden;
  margin-left: 10px;
} */

.page-one button{
  margin-left: auto;
  margin-right: auto;
  display: block;
  top: 48%;
  position: absolute;
  left: 25%;
  width: 50%;
  height: 30%;
  background-color: rgba(0, 0, 0, 0);
  outline:none;
  border: none;
}

.page-two img {
  width: 15%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  left: 40%;
  top: 80%;
  position: absolute;
}

body {
  /* 禁止页面滚动 */
  /* overflow: hidden; */
}

.animated {
  height: 100%;
}

.danmuArea img {
  width: 30px;
  height: 30px;
}

button.btn.btn-default.btn-sm {
  float: right;
}

